<template>
	<view class="container">
		<u-sticky customNavHeight="0" >
			<u-navbar leftIconColor="#fff" bgColor="#0a0816" title="我的藏品" :autoBack="true" placeholder></u-navbar>
			<view class="pad-left-right-160">
				<u-tabs @click="handelTypeTab"  :activeStyle="{ color: '#9f5ff6',fontSize: '32rpx' }"
				:inactiveStyle="{ fontSize: '28rpx' }" :itemStyle="{ height: '68rpx' }" :scrollable="false" :lineWidth="40"
					:duration="200" lineColor="#9f5ff6" :list="tabList"></u-tabs>
			</view>
		</u-sticky>

		<!-- 列表 -->
		<my-goods :list="list" @click="hanldeGoodsInfo"></my-goods>

		<!-- 弹框 -->
		<u-popup :show="goodsShow" :custom-style="{background:'#0a0816'}" round="12" closeable @close="goodsShow = false">
			<view class="pad-left-right-32 mar-top-bottom-48">
				<view class="goods-cover centerY betweenX">
					<image class="radius24" v-if="goodInfo.goods_info"
						:src="goodInfo.goods_info.cover + '?image_process=resize,l_350'" mode="aspectFill"></image>

					<view class="">
						<view v-if="goodInfo.goods_info" class="font-32 font-w-600 color-white">{{goodInfo.goods_info.name}}</view>
						<view class="font-28 color-grey mar-top-10">共{{goodInfo.cnt}}个</view>
					</view>
				</view>

				<!-- <view class="centerY betweenX mar-top-bottom-20 font-24">
					<view>默认价格从低到高排序</view>
					<view>平均价：¥ 0</view>
				</view> -->

				<view class="pad-left-right-80 mar-top-bottom-30">
					<u-tabs :activeStyle="{ color: '#9f5ff6',fontSize: '32rpx' }" :inactiveStyle="{ fontSize: '28rpx' }"
						:itemStyle="{ height: '68rpx' }" :scrollable="false" :lineWidth="0" :duration="200"
						:list="tabCollect"></u-tabs>
				</view>
				<view class="goods-list-box">
					<view class="goods-list rowW gap30">
						<view v-for="item in codeList" class="list centerXY radius16 bg-theme1"
							@click="hanldeCollectionDetails(item)">
							<view v-if="item.lock_scene =='market'">
								<view class="bg-theme color-white font-20 pad-left-right-24 pad-top-bottom-8 status">寄售中
								</view>
							</view>
							<template v-else>
								<view v-if="item.from_scene == 'goods_sale'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">发售
								</view>
								<view v-if="item.from_scene == 'airdrop'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">空投
								</view>
								<view v-if="item.from_scene == 'market'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">寄售市场
								</view>
								<view v-if="item.from_scene == 'compose'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">合成
								</view>
								<view v-if="item.from_scene == 'draw'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">抽奖
								</view>
								<view v-if="item.from_scene == 'blind_box'"
									class="status color-white font-20 pad-left-right-24 pad-top-bottom-8 status">盲盒
								</view>
							</template>
							<view><text class="font-16">￥</text> <text class="font-w-600 color-white">{{item.last_price}}</text>
							</view>
							<view class="color-grey font-24">#{{item.code}}</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 接口地址
	import {
		goodsGroupPageList,
		myGoodsCodeList,
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 分页
				ps: 20,
				page: 1,
				// 列表编号
				goodsShow: false,
				// 藏品折叠列表
				list: [],
				// 加载中状态
				pageStatus: 'loadmore',
				// 编号筛选
				tabCollect: [{
						name: '全部'
					},
					{
						name: '收藏中'
					},
					{
						name: '寄售中'
					},
				],
				// 藏品筛选
				tabList: [{
						name: '藏品',
						id: 1
					},
					{
						name: '盲盒',
						id: 2
					},
					// {
					// 	name: '已出售'
					// },
				],
				// 编号列表
				codeList: [],
				// 单个藏品数据
				goodInfo: {},
				// 默认选中盲盒 
				type: 1
			}
		},
		onLoad() {
			this.getDataList();
		},
		onReachBottom() {
			if (this.pageData.next_page_url) {
				this.getDataList();
			}
		},
		methods: {
			// 切换盲盒还是 藏品
			handelTypeTab(e) {
				this.list = [];
				this.page = 1;
				this.type = e.id;
				this.getDataList();
			},
			// 获取藏品折叠列表
			getDataList() {
				let data = {
					ps: this.ps,
					page: this.page,
					type: this.type
				}
				this.pageStatus = 'loading';
				goodsGroupPageList(data).then(res => {
					let {
						data
					} = res;
					this.pageData = data;
					this.page = data.current_page + 1;
					this.list = this.list.concat(data.data);
					this.pageStatus = 'loadmore';
					// 没有更多了
					if (data.next_page_url == null) {
						this.pageStatus = 'nomore'
					}
				})
			},
			// 打开弹框
			hanldeGoodsInfo(item) {
				this.goodInfo = item;
				myGoodsCodeList({
					goods_ids: [item.goods_id]
				}).then(res => {
					this.codeList = res.data.lists;
				})
				this.goodsShow = true;
			},
			// 寄售
			hanldeCollectionDetails(item) {
				this.goodsShow = false;

				// 盲盒
				if (item.goods_info.type == 2) {
					uni.navigateTo({
						url: '/pages/my/collectionBoxDetails?code_id=' + item.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/my/collectionDetails?code_id=' + item.id
					})
				}
			}
		}
	}
</script>


<style scoped lang='scss'>
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			/* background-image: url('../../static/image/my-bg.png'); */
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		::v-deep .u-sticky {
			/* background-image: url('../../static/image/my-bg.png') !important; */
			background-position: 0 0rpx;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.status {
			background-color: rgb(119, 162, 255);
		}

		.goods-cover {
			image {
				display: block;
				width: 160rpx;
				height: 160rpx;
			}
		}

		.goods-list-box {
			height: 800rpx;
			overflow: hidden;
			overflow-y: scroll;
		}

		.goods-list {

			.list {
				width: 328rpx;
				height: 140rpx;
				position: relative;
				overflow: hidden;
				flex-direction: column;
				padding-top: 24rpx;
				box-sizing: border-box;

				.status {
					position: absolute;
					right: 0rpx;
					top: 0rpx;

					border-radius: 0 0 0 24rpx;
				}
			}
		}
	}
</style>